<template>
	<view class="page">
		<view class="content">
			<view class="inner">
				<view class="item">
					<view class="item-i head">填写姓名</view>
					<view class="item-i" >
						<input type="text" placeholder="请输入" value="" placeholder-class="plcst"  v-model="name"/>
					</view>
				</view>
				<view class="item">
					<view class="item-i head">联系方式</view>
					<view class="item-i" >
						<input type="text" placeholder="请输入" value="" placeholder-class="plcst"  v-model="tel"/>
					</view>
				</view>
				<view class="item">
					<view class="item-i head">联系地址</view>
					<view class="item-i" >
						<input type="text" placeholder="请输入" value="" placeholder-class="plcst"  v-model="adr"/>
					</view>
				</view>
				<view class="item">
					<view class="item-i head">验证码</view>
					<view class="item-i">
						<input type="text" placeholder="请输入验证码" value="" placeholder-class="plcst"  v-model="code"/>
					</view>
					<img :src="src"  class="codeImg" alt="" @tap="changeCode">
				</view>
			</view>
			<view class="bottomBtn" @tap="register">
				立即参与
			</view>
			
			<!-- <view class="bottomBtn disable" v-show="type == 2">
			    本场活动已约满
			</view> -->
			<!-- <view class="bottomBtn have" v-if="obj.join_id > 0">
			    <view class="itemBtn">预约号:{{obj.code}}</view>
				<view class="itemBtn qvBtn" @tap="qvYuyue">取消预约</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import BASE_URL from '@/util/path.js';
	const Phone = /^[1][3,4,5,7,8,9][0-9]{9}$/
	export default {
		data() {
			return {
				type:3,
				name:"",
				tel:'',
				adr:'',
				code:'',
				src:'https://vote.diyi.cn/api/auth/captcha'
			}
		},
		onShow() {
			 this.getCode()
		},
		onLoad(option) {
          
		},
		methods: {
			getCode() {
				var _this = this;
				uni.request({
					url: 'https://vote.diyi.cn/api/auth/captcha',
					header: {
						'Content-Type': 'application/json'
					},
					method: 'get',
					success: (res) => {
						// console.log(res);
						_this.src = res.data;
						uni.hideLoading();
						// console.log(res);
						// const {
						// 	status,
						// 	data,
						// 	msg
						// } = res.data;
						
						// if (status == 200) {
						// 	const post_data = {
						// 		...obj,
						// 		...res.data.data
						// 	}
						// 	console.log(post_data);
						// 	_this.weixinLogin(post_data)
						// 	// console.log(post_data);
						// 	uni.hideLoading()
						// } else {
						// 	uni.showToast({
						// 		icon: 'none',
						// 		title: msg + 'wx_verify'
						// 	})
						// 	return
						// }
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			changeCode() {
				this.getCode();
			},
			async getDetail() {
				const res = await this.$http({
					url:'api/activity/info/' + this.id,
					method:"get",
					data:{}
				})
				//console.log(res);
				this.obj = res.data;
				console.log(this.obj)
			},
			async register(){
				if(!this.name) {
				  uni.showToast({
				  	title:"请填写姓名",
					icon:'none'
				  })
				  return
				}
				
				if(!Phone.test(this.tel)) {
				  uni.showToast({
				  	title:"请填写正确的手机号",
					icon:'none'
				  })
				  return
				}
				
				if(!this.adr) {
				  uni.showToast({
				  	title:"请输入地址",
					icon:'none'
				  })
				  return
				}
				
				if(!this.code) {
				  uni.showToast({
				  	title:"请填写验证码",
					icon:'none'
				  })
				  return
				}
				
				uni.request({
					url: BASE_URL + '/api/auth/login_by_code',
					header: {
						'Content-Type': 'application/json'
					},
					method: 'post',
					data:{
						mobile:this.tel,
						username:this.name,
						address:this.adr,
						code:this.code
					},
					success: (res) => {
						uni.hideLoading();
						const data = res.data.data;
						console.log(data)
						console.log(data.access_token);
						// uni.setStorageSync('access_token','');
						
						if(data.access_token) {
							uni.setStorageSync('access_token',data.access_token);
							uni.navigateTo({
								url:"/pages/list/list"
							})
						} else {
							uni.showToast({
								title:res.data.message,
								icon:'none'
							})
						}
						
						// console.log(res);
						// const {
						// 	status,
						// 	data,
						// 	msg
						// } = res.data;
						
						// if (status == 200) {
						// 	const post_data = {
						// 		...obj,
						// 		...res.data.data
						// 	}
						// 	console.log(post_data);
						// 	_this.weixinLogin(post_data)
						// 	// console.log(post_data);
						// 	uni.hideLoading()
						// } else {
						// 	uni.showToast({
						// 		icon: 'none',
						// 		title: msg + 'wx_verify'
						// 	})
						// 	return
						// }
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			async qvYuyue() {
				const _this = this;
				const res = await this.$http({
					url:'api/activity/cancel',
					method:"post",
					data:{
						username:this.name,
						id:_this.obj.join_id
					}
				})
				if(res.data) {
					uni.showToast({
						title:'取消预约成功！',
						icon:'none'
					})
					// debugger;
					this.obj.join_id = 0;
				}
			},
			 goBoming() {
				 uni.navigateTo({
				 	url: '/pages/list/list'
				 })
			 },
			 goPrePage() {
				 if(this.scene) {
					 uni.reLaunch({
					 	url:"/pages/index/index"
					 })
				 } else {
					 uni.navigateBack()
				 }
				 
			 }
		}
	}
</script>

<style lang='scss'>
	@function px($col) {
	  @return $col / 1.44 + rpx;
	}

    .plcst {
		color:#ababab;
	}
	.page {
		width: 100%;
		min-height: 100%;
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding-top: 582rpx;
		padding-bottom: 160rpx;
		background-color: #f6f6f6;
		position: relative;
	   background-image: url('../../static/head.png');
		.back {
			left: 38rpx;
			top: 87rpx;
			position: fixed;
			width: 58rpx;
			height: 58rpx;
			z-index: 9999;
		}
	}
	.item {
		position: relative;
		.codeImg {
			position: absolute;
			right: 0;
			top: 40rpx;
			width: 180rpx;
			height: 90rpx;
		}
	}
	.fufei {
		position: absolute;
		right: 0;
		top:0;
		background-color: #fd9138;
		color:#fff;
		width: 160rpx;
		height: 65rpx;
		font-weight: bold;
		font-size: 30rpx;
		border-radius:  0 32rpx 0 32rpx;
		@include center();
	}
	.content {
		width: 100%;
		justify-content: space-between;
		padding:0 px(45);
		.inner {
			background-color: #fff;
			border-radius: 32rpx;
			overflow: hidden;
			padding:px(35) px(56);
			position: relative;
			min-height: 1000rpx;
			.item {
				color:#333333;
				border-bottom: 1px solid #e2e2e2;
				padding-top: 35rpx;
				padding-bottom: 15rpx;
				font-size: 32rpx;
				
				.item-i {
					margin-bottom: 20rpx;
					font-weight: normal;
					&.head {
						font-weight: bold;
					}
					
				}
			}
		}
	}
	
	.loginbtn {
		position: fixed;
		height: px(170);
		width: 100%;
		left: 0;
		right: 0;
		bottom:0;
		z-index: 999;
		color:#fff;
		z-index: 99999;
		/* background-color: red; */
		background-color: #1080b2 !important;
		@include center();
	}
    .bottomBtn {
		position: fixed;
		height: px(170);
		width: 100%;
		left: 0;
		right: 0;
		bottom:0;
	    z-index: 999;
		color:#fff;
		font-weight: bold;
		background-color: #1080b2;
		/* background-color: #fff; */
		&.disable {
			background-color: #c3c3c3;
			color:#fff;
		}
		&.have {
			display: flex;
			.itemBtn {
				width: 50%;
				background-color: #fff;
				height: 100%;
				color:#474747;
				&.qvBtn {
					background-color: #d84f04;
					color:#fff;
				}
				@include center();
			}
			
		}
		@include center();
	}
</style>
